<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .top {
            display: flex;
            flex: 3;
        }

        .top > div {
            flex: 1;
        }

        .bottom > .ec002 {
            flex: 2;
        }

        .bottom {
            flex: 2;
            display: flex;
        }

        .bottom > .ec004 {
            flex: 1;
        }
    </style>
</head>
<body id="03_04heguifengxian" data-title="管理风险">
<div class="container">
    <h2 hidden>管理风险</h2>
    <header class="pageHeader">
        <div class="inputGroup">
            <label>平台：</label>
            <div class="mySelect" id="jingzhenglizhibiao4">
                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                </div>
                <ul class="myOptionBox">
                    <li class="myOption selected">海尔小额贷款</li>
                    <li class="myOption">蚂蚁小额贷款</li>
                    <li class="myOption">汇金小额贷款</li>
                    <li class="myOption">西岸小额贷款</li>
                    <li class="myOption">中鸿小额贷款</li>
                </ul>
            </div>
        </div>
    </header>
    <div class="top">
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>融资渠道占比</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec001_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-l">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>贷款用途占比</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-l">
            <div class="chartBox ec002">
                <div class="chartTitle">
                    <h3>地区占比</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec003_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="chartBox ec004">
            <div class="chartTitle">
                <h3>利率趋势</h3>
            </div>
            <div class="chartContent">
                <div class="chartBody">
                    <div id="ec004_ConcentrationDegree"></div>
                </div>
            </div>
        </div>
        <div class="chartBox ec002">
            <div class="chartTitle">
                <h3>合规风险列示</h3>
            </div>
            <div class="chartContent">
                <table>
                    <thead>
                    <tr>
                        <th>报警时间</th>
                        <th>预警指标</th>
                        <th>预警原因</th>
                        <th>平台名称</th>
                        <th>业务详述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr><td>20180415</td><td>合规风险</td><td>营业范围</td><td>重庆海尔小额贷款有限公司</td><td class="more"><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                    <tr><td>20180413</td><td>合规风险</td><td>营业范围</td><td>蚂蚁小额贷款有限公司</td><td class="more"><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>


                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];

    $(function () {
        var ec001 = echarts.init($("#ec001_currentCompetitiveness")[0]);
        ec001.setOption(opt_pie);
        ec001.setOption({
            label:pieLabelOut,
            series : [
                {
                    name:'融资渠道',
                    type:'pie',
                    radius : '60%',
                    center: ['45%', '50%'],
                    data:[
                        {value:80, name:'股东'},
                        {value:20, name:'银行'}
                    ]
                }
            ]
        });

        var ec002 = echarts.init($("#ec002_currentCompetitiveness")[0]);
        ec002.setOption(opt_pie);
        ec002.setOption({
            label:pieLabelOut,
            series : [
                {
                    name:'货款用途',
                    type:'pie',
                    radius : '60%',
                    center: ['45%', '50%'],
                    data:[
                        {value:10, name:'消费类'},
                        {value:14, name:'经营类'}
                    ]
                }
            ]
        });

        var ec003 = echarts.init($("#ec003_currentCompetitiveness")[0]);
        ec003.setOption(opt_pie);
        ec003.setOption({
            label:pieLabelOut,
            series : [
                {
                    name:'地区占比',
                    type:'pie',
                    radius : '60%',
                    center: ['45%', '50%'],
                    data:[
                        {value:10, name:'四川'},
                        {value:14, name:'重庆'},
                        {value:16, name:'广东'},
                        {value:18, name:'山东'},
                        {value:22, name:'湖北'},
                        {value:22, name:'其他'}
                    ]
                }
            ]
        });

        //热力图
        var ec004 = echarts.init($("#ec004_ConcentrationDegree")[0]);
        ec004.setOption(opt_scatter);
        var data = [
            [[160, 1500, 1700, '山东', 1990], [600, 500, 700, '江苏', 1990]],
            [[120, 1100, 1300, '山东', 2015], [200, 100, 300, '江苏', 2015]]
        ];
        ec004.setOption(
            {
                legend: {
                    show: false
                },
                grid: {
                    top: "20%",
                    bottom: "26%"
                },
                xAxis: {
                    name: '月',
                    data: ['1', '2', '3', '4', '5', '6'],
                },
                yAxis: {
                    type: 'value',
                    name: '%'

                },
                series: [{
                    symbol: 'circle',
                    data: ['10', '12', '13', '14', '15', '18'],
                    type: 'line',

                    itemStyle: {
                        normal: {
                            shadowBlur: 10*bodyScale,
                            shadowColor: 'rgba(120, 36, 50, 0.5)',
                            shadowOffsetY: 5,
                        }
                    }
                },
                    {
                        name: '1991',
                        data: ['10', '2', '3', '4', '5', '6'],
                        type: 'scatter',
                        symbolSize: function (data) {
                            return scatterSymbolSize(data)
                        },
                        label: {
                            emphasis: {
                                show: true,
                                formatter: function (param) {
                                    return param.data[3];
                                },
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 10*bodyScale,
                                shadowColor: 'rgba(120, 36, 50, 0.5)',
                                shadowOffsetY: 5,
                            }
                        }
                    }]
            });


        //本页所有图表
        allCharts = [ec001, ec002, ec003, ec004];

    });


</script>
</body>
</html>
